<template>
	<!-- 登录 -->
	<view class="login w100 h100 flex-col">
		<view class="login-bg">
			<!-- <view class="txt"> 欢迎登录 </view>
			<view class="txt1"> 信发北山综合管理平台 </view> -->
		</view>
		<view class="login-form flex-grow-1">
			<uni-forms :modelValue="loginForm" :rules="rules" ref="Form" label-position="top">
				<uni-forms-item name="userName">
					<template #label><text class="fw">账号</text></template>
					<up-input v-model="loginForm.userName" border="bottom" autoBlur clearable placeholder="请输入账号">
						<template #suffix>
							<up-icon name="account" size="18"></up-icon>
						</template>
					</up-input>
				</uni-forms-item>
				<uni-forms-item name="password">
					<template #label><text class="fw">密码</text></template>
					<up-input v-model="loginForm.password" border="bottom" autoBlur :password="showPassword"
						placeholder="请输入密码">
						<template #suffix>
							<up-icon :name="showPassword ? 'lock':'lock-open'" @click="showPassword = !showPassword"
								size="18"></up-icon>
						</template>
					</up-input>
				</uni-forms-item>
			</uni-forms>
			<u-button @tap="login()" shape="circle" color="linear-gradient(83deg, #005DFF -2%, #009AF9 99%)">
				登录
			</u-button>
			<image class="bottom" src="/static/img/login/bg.png" mode="" />
		</view>
	</view>
</template>

<script setup>
	import {
		loginFn
	} from '@/hooks/login.js'

	let Form = ref(null);

	// 登录参数
	const showPassword = ref(true),
		loginForm = reactive({
			password: uni.getStorageSync('password'),
			userName: uni.getStorageSync('userName'),
		})
	// 校验规则
	const rules = {
		username: {
			rules: [{
				required: true,
				errorMessage: '请输入姓名',
			}]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入密码',
			}]
		}
	}
	// 登录逻辑
	function login() {
		Form.value.validate().then((res) => {
			loginFn({
				password: loginForm.password,
				userName: loginForm.userName
			})
		})
	}

	onShow(() => {
		//关闭推送事件监听
		uni.offPushMessage();
	})
</script>

<style scoped lang="scss">
	.login-bg {
		background-image: url("/static/img/login/loginBg.png");
		background-size: 100% 90%;
		background-repeat: no-repeat;
		height: 575rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #fff;
		padding-left: 40rpx;

		.txt {
			font-weight: 500;
			font-size: 48rpx;
			margin-top: 20rpx;
		}

		.txt1 {
			font-weight: 500;
			font-size: 48rpx;
			margin-top: 20rpx;
		}
	}

	.login {
		&-form {
			background-color: #fff;
			border-radius: 40rpx 40rpx 0px 0px;
			background-color: #fff;
			margin-top: -90rpx;
			padding: 80rpx 60rpx 0;
			position: relative;

			.bottom {
				height: 60rpx;
				position: fixed;
				bottom: 40rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>